<template>
    <h4>单文件组件的样式的定义</h4>
    <ol>
        <li>.vue文件中可以通过多个 style 标签完成样式的定义和描述</li>
        <li>
            .vue文件中 style 标签未增加任何额外描述时，该位置定义的样式使用css语言系统，并且为全局样式
            <div class="pre">
                + 单文件定义的样式，在程序编译时会被统一进行组合，并将组合的样式以独立全局css文件方式进行加载; <br>
                + 开发环境中，文件的样式会作为html内联样式被临时记录;
            </div>
        </li>
        <li>
            .vue文件中 style 标签可以通过增加scoped属性，将样式封闭成单文件组件的局部样式<br>
            <div class="pre">
                + 当单文件组件的 style标签定义了 scoped 属性时，在编译该文件时，模板标签会增加 data-v-hashcode 属性 <br>
                + 当前文件的 scoped style 标签中的所有的样式，默认在**选择器末尾**增加 [data-v-hashcode] 属性选择器 <br>
                + scoped 生成的 data-v-hashcode 属性，默认的随机值使用 hashcode算法，可以保证在相同文件中值相同，不同文件中值不相同 <br>
                + scoped style 定义的样式中，可以通过关键字调整 [data-v-hashcode] 属性的位置; <br>
                + + 【早期模块环境:>>>、::v-deep 、/deep/】 例如 .a >>> .b  、 .a::v-deep .b  、 .a /deep/ .b <br>
                + + 【新模块环境使用 :deep(被穿透的样式)】 例如  .a :deep(.b)
            </div>
        </li>
        <li>vue3的版本中增加style样式的仓库变量获取方案 v-bind()</li>
        <li>vue3的版本中增加style样式的特殊选择器 :slotted(被操作的分发标签),用于为分发内容提供样式绑定</li>
        <li>
            vue单文件组件的 style 可以通过 lang 属性修改样式的语言系统【 css less sass/scss stylus 】
            <div class="pre">
                + vue的模块化环境的功能扩展是需要提供环境功能支持的；<br>
                + vue的模块化环境的功能扩展每个功能模块都需要提供两个环境支持模块【功能自身模块，功能加载模块】<br>
                + + 项目运行过程中进行模块功能扩展安装(npm install) , 如果安装的模块不需要修改启动环境，可以不停止服务器进行安装 <br>
                + vue的模块化环境中，可以通过增加 style-resources-loader 模块并且修改启动配置，完成动态样式的全局资源加载 <br>
                + vue的模块化环境，通过 vue-cli-plugin-style-resources-loader ,可以自动完成配置项的继承和环境代码的修改 <br>
                + + vue-cli-plugin-…… 插件如果手动安装不会触发自动代码生成功能，如果需要生成功能代码必须是用 vue add 插件对应的模块 <br>
                + + 例如 集成  vue-cli-plugin-style-resources-loader ==> vue add style-resources-loader <br>
            </div>
        </li>
    </ol>
    <p>红色</p>
    <!-- <StyleComponet style="color:red;"></StyleComponet> -->
    <StyleComponet class="color1"></StyleComponet>
    <p>蓝色</p>
    <StyleComponet class="color2"></StyleComponet>
    <p>样式仓库变量绑定</p>
    <p :style="`color:${c}`">动态样式切换</p>
    <p class="pcolor">动态样式切换</p>
    <input type="color" v-model="c">
    <br>
    <StyleComponet>
        <p>分发内容</p>
    </StyleComponet>
    <hr>
    <p>sass动态样式集成</p>
    <div class="sass-box">
        <p class="info">动态样式加载</p>
    </div>
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>3</li>
    </ul>
</template>

<script>
import StyleComponet from "@/components/StyleComponet.vue";
    export default {
        components:{
            StyleComponet
        },
        data() {
            return {
                c: "#000000"
            }
        },
    }
</script>

<style>
/* 全局样式 */
li{
    /* background-color: #ccc; */
}
/* .color1 p{
    color: red!important;
} */
</style>
<style scoped>
/* 局部样式 */
li{
    color: orangered;
}
/* .color1 p{
    color: red!important;
} */
/* .color1 >>> p{
    color: red!important;
} */
/* .color1::v-deep p{
    color: red!important;
} */
/* .color1 /deep/ p{
    color: red!important;
} */
.color1 :deep(p){
    color: red!important;
}
.color2 :deep(p){
    color: blue!important;
}
.pcolor{
    color:v-bind(c);
}
</style>
<style lang="scss" scoped>
/* scss变量定义开始 */
// $fontColor:#ff0000;
// $bgColor:#ccc;
/* scss变量定义结束 */
.sass-box{
    .info{
        // --fontColor:#ff0000;
        // color:$fontColor;
        color: var(--fontColor);
        background-color: $bgColor;
        // &:active{
        //     color:$fontColor;
        // }
    }
    
}
.nav{
    @extend .ext-ul;
}

</style>